<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { createDataCourse } from '@/api/course';

  const emit = defineEmits(['close']);

  const name = ref('');

  const saving = ref(false);

  const handleSubmit = async () => {
    if (!name.value.trim()) {
      Message.warning('请输入球场名称');
      return;
    }

    try {
      saving.value = true;
      await createDataCourse(name.value.trim());
      Message.success('创建成功');
      emit('close', true);
    } finally {
      saving.value = false;
    }
  };
</script>

<template>
  <a-modal
    title="添加数据球场"
    :width="550"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-input v-model="name" placeholder="请输入球场名称" />
  </a-modal>
</template>
